<!DOCTYPE HTML>
<html>
<head>
<title>平铺菜单</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />

<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link href="css/component.css" rel="stylesheet" type="text/css"  />
</head>
<body class="cbp-spmenu-push">
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <div class="navbar-header">
		       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
		       </button>
		    </div>
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav ">
		      	<li><a href="" class="navbar-brand"><img src="images/logo.png" height="22px" width="90px"/></a></li>
		        <li><a href="index.html">主页<span class="sr-only">(current)</span></a></li>
		        <li><a href="menu.html">菜单价格<span class="sr-only">(current)</span></a></li>
		        <li><a href="events.html">翻折菜单<span class="sr-only">(current)</span></a></li>
		        <li class="active"><a href="gallery.html">平铺菜单<span class="sr-only">(current)</span></a></li>
		
		      </ul>     
		    	</div>
		 	 </div>
		</nav>
						<div class="main buttonset">	
								<!--<button id="showRightPush"><img src="images/menu.png" alt=""/></button>-->
						</div>
						<script src="js/classie.js"></script>
						<script>
						var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
						showRightPush = document.getElementById( 'showRightPush' ),
						body = document.body;

						showRightPush.onclick = function() {
							classie.toggle( this, 'active' );
							classie.toggle( body, 'cbp-spmenu-push-toleft' );
							classie.toggle( menuRight, 'cbp-spmenu-open' );
							disableOther( 'showRightPush' );
						};

						function disableOther( button ) {
							if( button !== 'showRightPush' ) {
								classie.toggle( showRightPush, 'disabled' );
							}
						}
					 </script>
				</div>
					<div class="clearfix"> </div>
				</div>
			</div>
	</div>
	<div class="gallery">
		<div class="container">
			 <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
			<div class="slider">
					 <div class="works main">						  
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f1.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">
											<span class="rollover1"> </span>
											<span class="rollover2"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f1.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f2.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> 
											<span class="rollover1"> </span>
											<span class="rollover2"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f2.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f3.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
							    <img src="images/f3.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f4.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f4.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f2.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f2.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f3.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f3.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f4.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f4.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f1.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f1.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f3.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f3.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f4.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f4.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f1.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f1.jpg" alt="">
						  </div>
						  <div class="gallery-box">
								<div id="nivo-lightbox-demo"> 
									<p> 
										<a href="images/f2.jpg" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo">  
											<span class="rollover1"> </span>
										</a> 
									</p>
								</div>     
								<img src="images/f2.jpg" alt="">
						  </div>
						 <div class="clearfix"></div>
					  </div>	
				   <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>
				<script type="text/javascript">
				$(document).ready(function(){
				    $('#nivo-lightbox-demo a').nivoLightbox({ effect: 'fade' });
				});
				</script>
			</div>
		</div>
	</div>
	<div id="bottom" class="panel-footer">
		<p style="text-align: center;">
			Copyright © 2018.Company name All rights reserved.More Templates
			<img src="images/footer-icons.png"/>			
		</p>		
	</div>
</body>
</html>